@import './element-plus.scss';
@import './common.scss';
@import './variables.scss';

// 全局样式
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  color: #333;
  background-color: #f5f7fa;
}

#app {
  height: 100%;
}

// 全局滚动条样式
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
  border-radius: 4px;

  &:hover {
    background-color: rgba(144, 147, 153, 0.5);
  }
}

// 通用类
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.full-height {
  height: 100%;
}

.full-width {
  width: 100%;
}

// 动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.3s;
}

.slide-right-enter-from {
  transform: translateX(100%);
}

.slide-right-leave-to {
  transform: translateX(-100%);
}

// 响应式
@media (max-width: 768px) {
  .hidden-xs {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hidden-sm {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .hidden-md {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}

// 覆盖 Element Plus 默认菜单样式
.el-menu {
  border-right: none !important;
}

// 修复菜单嵌套问题 - 关键修复
.el-menu--vertical {
  .el-menu--popup {
    max-height: none !important; // 取消最大高度限制
  }
}

// 强制子菜单展开时使用正确的定位和布局方式
.el-menu .el-sub-menu.is-opened {
  & > .el-menu {
    position: static !important; // 静态定位
    display: block !important; // 确保显示
    height: auto !important; // 自动高度
    transform: none !important; // 取消变换
    opacity: 1 !important; // 确保可见
    padding-left: 20px; // 左侧缩进
    margin-bottom: 8px; // 底部间距
  }
}

// 处理弹出菜单定位问题
body {
  .el-menu--popup-container {
    position: static !important;
    
    .el-menu--popup {
      position: static !important;
    }
  }
  
  // 确保弹出菜单使用静态布局
  .el-menu--collapse .el-sub-menu > .el-menu {
    position: static !important;
  }
  
  // 移除菜单项下划线
  .el-menu, .el-sub-menu, .el-menu-item, .el-sub-menu__title {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    
    a, span, div {
      text-decoration: none !important;
      border-bottom: none !important;
      box-shadow: none !important;
    }
  }
  
  // 修复选中菜单项样式
  .el-menu-item.is-active {
    border-bottom: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    background-color: #ecf5ff !important;
    
    &::after {
      display: none !important;
    }
  }
}
